<template>
    <div class="card-detail">

        <div class="card ovh">
            <div class="card-bg">
                <img mode="widthFix" src="../static/images/card-bg.png" alt="">
            </div>
            <div class="user-info rlv">
                <div class="avatar"><img mode="aspectFill" :src="cardInfo.head" alt=""></div>
                <span class="nickname">
                  <span id="text" :style="fonSize1">{{cardInfo.name}}</span>
                  <img class="auth" src="../static/images/auth.png" mode="widthFix" alt="">
                </span>
            </div>

            <div class="share-ctrl">
                <div class="btn" @click="handleEdit" v-if="isOwner">修改</div>
                <button open-type="share" class="btn">转发</button>
            </div>

            <div class="ada-info rlv">
                <div class="info-field" @click="makePhoneCall">
                    <div class="label">电话</div>
                    <div class="tel">{{cardInfo.phone}}</div>
                </div>
                <div class="info-field">
                    <div class="label">地址</div>
                    <div @click="showMap" class="address">{{cardInfo.address}}</div>
                    <img @click="showMap" class="icon-locate" mode="widthFix" src="../static/images/icon-locate.png"
                         alt="">
                </div>
                <div class="info-field">
                    <div class="label">微信</div>
                    <div class="wechat">{{cardInfo.wechat}}</div>
                    <div class="btn-copy" @click="handleCopy(cardInfo.wechat)">
                        <span>复制</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="my-card-btn" @click="toMyCard" v-if="!isOwner && isABO">我的名片</div>
        <div class="content">
            <ac-title>个人简介</ac-title>
            <div class="intro">
                {{cardInfo.intro}}
            </div>
            <div class="recent-visitors-section" v-if="isOwner">
                <ac-title>
                    最近访客
                    <div slot="more" class="more" @click="toRecentVisitors">
                        查看更多
                        <van-icon name="arrow" color="rgba(217,217,217,1)"></van-icon>
                    </div>
                </ac-title>
                <div class="recent-visitors" v-if="visitors.length">
                    <ac-recent-visitor v-for="(item, index) in visitors" :info="item" :key="index"></ac-recent-visitor>
                </div>
                <div class="no-visitors" v-else>
                    暂无访客
                </div>
            </div>
            <ac-title>我的推荐</ac-title>
            <van-row class="product-list">
                <van-col span="8" v-for="(item, index) in refProducts" :key="index">
                    <ac-product :product="item" :owner-ada="cardInfo.ada"></ac-product>
                </van-col>
            </van-row>
        </div>
        <div class="my-shop">
            <van-button block round type="primary" size="large" @click="toMyShop">进入微店</van-button>
        </div>
    </div>
</template>

<script>
  import acRecentVisitor from '@/components/ac-recent-visitor'
  import acProduct from '@/components/ac-product'
  import acTitle from '@/components/ac-title'
  import {mapGetters} from "vuex";
  import {getGeoCoder, getLog, getProduct, postLog} from "@/api";


  export default {
    name: "card-detail",
    props: {
      cardInfo: {
        type: Object,
        default: () => ({
          head: '',
          name: '',
          phone: '',
          address: ''
        })
      },
    },
    data() {
      return {
        refProducts: [],
        visitors: [],
        fonSize1:{'font-size':'28rpx'}
        // userInfo:{
        //   id:this.$mp.query.id
        // },
        // cardInfo:{
        //   refId:this.$mp.query.id
        // }
      }
    },
    components: {
      acTitle, acRecentVisitor, acProduct
    },
    computed: {
      ...mapGetters(['userInfo', 'addressPositions']),


      isOwner() {
        console.log(this.userInfo)
        if (this.userInfo) {
          return this.cardInfo.memberId === this.userInfo.id;
        } else {
          return false
        }

      },
      isABO() {
        return (this.userInfo && this.userInfo.role === "ABO")
      }
    },
    methods: {
      onImgOK(e) {
        // console.log(e)
      },
      handleEdit() {
        Megalo.redirectTo({
          url: '/pages/add-card'
        });
      },
      showMap() {
        const address = this.cardInfo.address;
        let addressDetail = this.addressPositions[address];
        if (addressDetail) {
          Megalo.openLocation({
            ...addressDetail,
            address: address,
            scale: 15
          });
        } else {
          this.$appWrap.showLoading();
          getGeoCoder(address).then(({status, result, message}) => {
            // console.log(status, result, message)
            this.$appWrap.hideLoading();
            if (status === 0) {
              const {title, location} = result;
              addressDetail = {
                name: title,
                latitude: location.lat,
                longitude: location.lng
              };
              this.$store.dispatch('updateAddress', {address, addressDetail});
              Megalo.openLocation({
                ...addressDetail,
                address: address,
                scale: 15
              });
            } else {
              this.$toast(message)
            }
          })
        }
      },
      handleCopy(data) {
        Megalo.setClipboardData({data});
      },
      toRecentVisitors() {
        Megalo.navigateTo({
          url: '/pages/recent-visitors'
        })
      },
      makePhoneCall() {
        Megalo.makePhoneCall({
          phoneNumber: this.cardInfo.phone
        });
      },
      toMyCard() {
        Megalo.navigateTo({
          url: '/pages/index'
        })
      },
      toMyShop() {
        Megalo.navigateToMiniProgram({
          appId: 'wxf780a3b16440eb52',
          path: `/pages/home/home?utm_source=AmwayCardMini&utm_medium=homepage&utm_term=${this.cardInfo.ada}&shareNumber=${this.cardInfo.ada}&abonumber=${this.cardInfo.ada}`
        })
      },
      getRefProduct() {
        if (this.cardInfo.refProduct.length > 0) {
          // debugger
          console.log(this.cardInfo)
          const itemNumber = this.cardInfo.refProduct.map(item => item.itemNumber);
          getProduct(itemNumber.join(','))
            .then(data => {
              this.refProducts = data.data;
            });
        }
      },
      apiLog() {
        // console.log(this.cardInfo)
        if(!!this.isOwner || !this.userInfo.id){
          return
        }

        this.userInfo && postLog({
          memberId: this.userInfo.id,
          refId: this.cardInfo.id,
          type: 1
        });
      },
      getVisitors() {
        getLog({
          type: 1,
          refId: this.cardInfo.id,
        }).then(data => {
          this.visitors = data.data || [];
          // console.log(data)
        });
      }
    },
    created() {

      // 查询产品信息
      this.getRefProduct();

      // 记录浏览记录
      // this.apiLog();

      // 查询浏览记录
      this.getVisitors();
      //
      // console.log(this.cardInfo)
      // console.log(this.userInfo)

      Megalo.setNavigationBarTitle({
        title: this.isOwner ? '我的名片' : this.cardInfo.name + '的名片'
      })


    },
    mounted(){

      if(this.cardInfo.name.length>7){
        this.fonSize1 = {'font-size':'28rpx'}
      }else{
        this.fonSize1 = ''
      }
    }
  }
</script>

<style scoped lang="less">
    @import "../style/card";
</style>
